<template>
    <div class="address-container">
        <ul class="list">

            <li
                v-for="(item,index) in addrList"
                :key="index"
                class="item"
            >
                <p>收货人: {{item.consignee}}</p>
                <p class="small">手机号码:18710958888</p>
                <p class="small">收货地址: 
                    {{item.province}}{{item.city}}{{item.district}}{{item.address}}
                </p>
                <p class="actions">

                    <label class="btn-edit">
                        <a :href="'../addr_edit/main?id='+item.id">
                            <span class="iconfont iconbianji "></span> 编辑
                        </a>
                    </label>

                    <label class="btn-del" @click="addrDel(item.id,index)">
                        <span class="iconfont iconicon_del"></span> 删除
                    </label>

                </p>
            </li>
        </ul>

        <navigator url="../addr_add/main">
            <!-- plain -->
            <button
                type="warn"
                class="btn-add"
            >
                <span class="iconfont iconxinzeng"></span>
                新增收货地址
            </button>
        </navigator>
    </div>
</template>
<script>
export default {
    data() {
        return {
            addrList:[]
        };
    },
    methods: {
        // 删除地址
        addrDel(id,index){
            const that=this;
            wx.showModal({
                title: '提示',
                content: '确认删除?',
                success (res) {
                    if (res.confirm) {
                        that.$http.get({
                            url:'m=Index&a=addrDel',
                            data:{
                                id
                            }
                        }).then((res)=>{
                            // console.log(res);
                            that.addrList.splice(index,1);
                        });
                    } else if (res.cancel) {
                        // console.log('用户点击取消')
                    }
                }
            })

            
        }
    },
    onShow(){
        const that=this;
        wx.getStorage({
            key:'userInfo',
            success(res){
                that.$http.get({
                    url:'m=Index&a=getAddrList',
                    data:{
                        userid:res.data.id
                    }
                }).then((ret)=>{
                    that.addrList=ret.data;
                });
            }
        });
        
    },
    mounted() {}
};
</script>
<style lang="scss">
@import "./static/styles/reset.scss";
@import "./static/iconfont/iconfont.scss";
page {
    background-color: $bgColor;
}
.address-container {
    .list {
        margin-bottom: 160rpx;
        .item {
            background: #fff;
            padding: 20rpx;
            margin: 10px;
            line-height: 50rpx;
            .small {
                font-size: 34rpx;
                color: #999;
            }
            .actions {
                text-align: right;
                font-size: 32rpx;
                .btn-edit {
                    display: inline-block;
                    navigator{
                        color: green;
                    }
                    .iconbianji {
                        font-size: 48rpx;
                    }
                }
                .btn-del {
                    display: inline-block;
                    margin-left: 40rpx;
                    color: #E64340;
                    navigator{
                        color: #E64340;
                    }
                    .iconicon_del {
                        font-size: 48rpx;
                    }
                }
            }
        }
    }
    .btn-add {
        position: fixed;
        z-index: 999;
        bottom: 10rpx;
        left: 0;
        width: 100%;
        .iconxinzeng {
            font-size: 48rpx;
            color: #fff !important;
            margin-top: -10rpx;
        }
    }
}
</style>

